<template>
  <div class="w">
    <el-row v-for="(value, index) in hotelList" :key="index">
      <!-- 图片 -->
      <el-col :span="8">
        <div class="grid-content bg-purple pic">
          <a :href="getHref(value.id)">
            <img :src="value.photos" alt="" />
          </a>
        </div>
      </el-col>

      <!-- 名字评分以及位置 -->

      <el-col :span="10">
        <div class="grid-content bg-purple-light recommend">
          <h4>
            <a :href="getHref(value.id)" class="hotel-cn-name">{{
              value.name
            }}</a>
          </h4>

          <!-- jin jiang zhi xing (shang hai min hang wu jing dian) -->
          <div class="hotel-en-name">
            <span>{{ value.alias }} </span>
          </div>

          <!-- 评价 -->

          <el-row>
            <!-- 星星评价等级 -->
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <span class="el-rate__item">
                  <!-- el-rate__icon -->
                  <i class="el-rate__icon el-icon-star-on"></i>
                </span>
                <span class="el-rate__item">
                  <!-- el-rate__icon -->
                  <i class="el-rate__icon el-icon-star-on"></i>
                </span>
                <span class="el-rate__item">
                  <!-- el-rate__icon -->
                  <i class="el-rate__icon el-icon-star-on"></i>
                </span>
                <span class="el-rate__item">
                  <!-- el-rate__icon -->
                  <i class="el-rate__icon el-icon-star-on"></i>
                </span>
                <!-- <span class="el-rate__text">{{ value.hotellevel.name }}</span> -->
                <!-- <span class="el-rate__text">成功报错</span> -->
                <!-- <span class="el-rate__text" v-if="value.hotellevel">{{
                  value.hotellevel.name
                }}</span> -->
                <span class="el-rate__text">{{ value.stars }}分</span>
              </div>
            </el-col>

            <!-- 12 条评价 -->
            <el-col :span="7"
              ><div class="grid-content bg-purple-light">
                <span class="yellow">{{ value.all_remarks }}</span
                >条评价
              </div>
            </el-col>
            <!-- 20 篇游记 -->
            <el-col :span="7">
              <div class="grid-content bg-purple">
                <span class="yellow">{{ value.price }}</span
                >篇游记
              </div>
            </el-col>
          </el-row>

          <!-- 位于: 剑川路165号(近龙吴路) -->
          <div class="location-row">
            <i class="el-icon-map-location"></i>
            位于: {{ value.address }}
          </div>
        </div>
      </el-col>

      <!-- 携程艺龙等  hotelDetails-->
      <el-col :span="6">
        <div class="grid-content bg-purple table_body">
          <table>
            <tr v-for="(item, index1) in value.products" :key="index1">
              <td rowspan="1" colspan="1">
                <!-- <div class="cell">携程</div> -->
                <div class="cell">
                  {{ item.name }}
                </div>
              </td>
              <td rowspan="1" colspan="1">
                <div class="cell">
                  <span class="height-light larger"> ￥{{ item.price }}</span
                  >起
                </div>
              </td>
            </tr>
            <!-- <tr>
              <td rowspan="1" colspan="1">
                <div class="cell">艺龙</div>
              </td>
              <td rowspan="1" colspan="1">
                <div class="cell">
                  <span class="height-light larger"> ￥212</span>起
                </div>
              </td>
            </tr>
            <tr>
              <td rowspan="1" colspan="1">
                <div class="cell">Hotels.com</div>
              </td>
              <td rowspan="1" colspan="1">
                <div class="cell">
                  <span class="height-light larger"> ￥245</span>起
                </div>
              </td>
            </tr> -->
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["hotelList"],
  data() {
    return {};
  },
  mounted() {
    // console.log(this.$route.query);
    // 获取数据
    this.$axios({
      method: "get",
      url: "/hotels",
      params: {
        // city: this.$route.query.city,
      },
    }).then((res) => {
      // console.log(res.data.data);
      // 在子组件里面不可以赋值或者在data里面定义，不然会报警告
      // this.hotelList = res.data.data;
      // this.pic=
    });
  },
  methods: {
    getHref(val) {
      return "http://localhost:3000/hotel/hotelDetails?id=" + val;
    },
  },
};
</script>

<style lang="less" scoped>
.w {
  img {
    width: 100%;
    height: 100%;
  }
  width: 1000px;
  .pic {
    width: 320px;
    height: 210px;
    // background-color: rgb(255, 166, 0);
    border: 2px solid black;
  }
  .recommend {
    .hotel-cn-name {
      font-weight: 400;
      font-size: x-large;
      color: black;
    }
    .el-rate__item {
      font-size: 0;
      vertical-align: middle;
    }
    .el-rate__icon,
    .el-rate__item {
      position: relative;
      display: inline-block;
    }
    .el-rate__icon {
      font-size: 18px;
      margin-right: 6px;
      color: #c0c4cc;
      transition: 0.3s;
      color: rgb(255, 153, 0);
    }
    .el-rate__text {
      color: rgb(255, 153, 0);
    }
    .yellow {
      color: rgb(255, 153, 0);
    }
  }
  .table_body {
    font-size: 14px !important;
    width: 234px;
    height: 146px;
    padding-left: 10px;
    .cell {
      border-bottom: 1px solid #ddd;
      height: 49px;
      line-height: 49px;
      .height-light {
        color: #f90;
      }
      .larger {
        font-size: larger;
      }
    }
  }
}
</style>